<template>
  <!-- Google配置 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row></template>
        <template v-slot:actions>
          <el-button v-permission="'google.add'" type="primary" size="mini" icon="el-icon-plus" 
          @click="isShowDetails = true, checkedItem = null">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row,'')">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="types" label="类型" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="typeType(scope.row.types)">{{ typeLabel(scope.row.types) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="用户" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span><span v-show="scope.row.user_id">【{{scope.row.user_id}}】</span>{{ $public.accountLabel(scope.row.user_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="google_secret" label="谷歌秘钥" align="center"/>
          <el-table-column prop="google_url" label="谷歌Url" align="center"/>
          <el-table-column prop="created_at" label="创建时间" align="center" width="200"/>
          <el-table-column prop="operation" label="操作" align="left" width="180">
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'google.edit'" content="编辑" placement="top-start">
                <el-button size="mini" type="warning" @click.stop="handleCurrentChange(scope.row,'edit')" icon="el-icon-edit-outline" />
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'google.delete'" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click="handleCurrentChange(scope.row,'delete')" icon="el-icon-delete"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" :typeData="typeData" :data="checkedItem" @onHideDetails="onHideDetails"/>
      <el-dialog :visible.sync="isShowCodeDetails" v-if="isShowCodeDetails" title="谷歌验证" width="45%" :before-close="onHideDetails" top="200px" :close-on-click-modal="false">
        <el-input v-model="googleCode" type="text" placeholder="请输入谷歌验证码"/>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="onHideDetails">取 消</el-button>
          <el-button type="primary" size="medium" @click="editCode">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getQrCode,
  delQrCode,
  qrCodeCheck
} from '@/api/config'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'google',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      listQuery: {
        page: 1,
        size: 50,
      },
      googleCode:'',
      googleType:'edit',
      typeData:[
        // {label:'资源发放',value:1,type:'primary',text:'resource'},
        {label:'提现审核',value:2,type:'success',text:'withdraw'},
        // {label:'kol审核',value:3,type:'warning',text:'kol'},
        // {label:'邮件公告',value:4,type:'danger',text:'mail'},
      ],
      isShowDetails: false,
      isShowCodeDetails: false,
      checkedItem: null,
      listLoading: true,
      dataList: [],
      currentTotal: 0,
    }
  },
  created () {
    // this.getDataList();
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取Google列表
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = []
      that.checkedItem = null
      const response = await getQrCode(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item => {
            item.isChecked = false
          })
          that.dataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 编辑修改
    editCode(){
      let that = this,params=that.checkedItem;
      if(!that.googleCode){
        return that.$message.error('请输入谷歌验证码')
      }
      qrCodeCheck({
        types:params.types,
        google_code:that.googleCode,
      }).then(res => {
        if (res.code == 1) {
          if(that.googleType=='edit'){
            that.isShowDetails=true
          }else{
            that.deleteItem(params)
          }
          that.googleCode=''
          that.isShowCodeDetails=false
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 编辑/查看
    editItem (row) {
      this.checkedItem=row
      this.handleCurrentChange(row)
    },
    // 删除
    deleteItem (row) {
      const that = this
      that.handleCurrentChange(row)
      that.$confirm(`是否删除Google配置?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delQrCode({
          id: row.id
        }).then(res => {
          if (res.code == 1) {
            that.getDataList()
            that.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      }).catch((err) => {})
    },
    // 类型
    typeLabel(cellValue){
      return (this.typeData.find((item) => item.value === cellValue)?.label || "-");
    },
    typeType(cellValue){
      return (this.typeData.find((item) => item.value === cellValue)?.type || "-");
    },
    // 选择表格数据
    handleCurrentChange (val,type) {
      this.checkedItem = val
      if(type){
        this.googleType = type
        this.isShowCodeDetails=true
      }
      this.dataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    onHideDetails (show) {
      this.isShowDetails = false
      this.isShowCodeDetails = false
      if (show) {
        this.getDataList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
      }
      this.getDataList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
